<!DOCTYPE html>
<html>
<head>
  <title>Tasks</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta http-equiv="Access-Control-Allow-Origin" content="*"/>

  <meta http-equiv="X-Frame-Options" content="ALLOW-FROM">
  <meta http-equiv="pragma" content="no-cache" />

  <!-- 3rd part UI ratchet -->
  <link href="ratchet/css/ratchet.css" rel="stylesheet"/>

  <!-- butterfly.js styles -->
  <link href="butterfly/css/animate.css" rel="stylesheet"/>

  <script type="text/javascript" src="butterfly/vendor/requirejs/require.js" data-main="main"></script>
</head>
<body>

    <!-- List Item 模板 -->
    <script id="cell-template" type="text/x-template">
      <%= name %>
    </script>

    <style type="text/css">
      #edit:before {
        content: 'Edit';
        font-size: 20px;
        padding-top: 12px; padding-bottom: 12px;
      }
      #edit.editing:before {
        content: 'Cancel';
        font-size: 20px;
        padding-top: 12px; padding-bottom: 12px;
      }
    </style>

    <div id="main" data-view="$StackView">

      <div id="main-page" data-view="index">
        <header class="bar bar-nav">
          <a id="refresh" class="icon icon-refresh pull-left"></a>
          <a id="edit" class="icon pull-right"></a>
          <h1 class="title">Tasks</h1>
        </header>

        <div class="bar bar-standard bar-footer">
          <a id="add" class="icon icon-compose pull-left"></a>
          <a class="icon icon-gear pull-right"></a>
        </div>

        <div class="content">

          <!-- Bind to ListView Component-->
          <!-- 使用表达式，或注册实例ID（全局），extend的时候给一个ID？new一个的时候给一个ID？-->
          <div id="todo-list"
               data-view="listview"
               data-collection="{superview.tasks}"
               data-itemTemplate="#cell-template"
               data-iscroll="false">

            <div class="scroller">
              <ul class="table-view">

              </ul>
              <button class="loadmore btn btn-block">
                <div class="label">加载更多</div>
                <span class="icon"></span>
              </button>
            </div>

          </div>

        </div>
      </div>

    </div>

</body>
</html>
